<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家族管理系统 - 注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background-color: #f8f9fa; }
        .register-container {
            max-width: 500px;
            margin: 50px auto;
            padding: 30px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .error-message { color: #dc3545; }
    </style>
</head>
<body>
<div class="container">
    <div class="register-container">
        <h2 class="text-center mb-4">注册新家族</h2>

        <!-- 显示成功消息（放在表单外） -->
        <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>

        <!-- 全局错误显示（放在表单外） -->
<!--        <div th:if="${#fields != null && #fields.hasGlobalErrors()}" class="alert alert-danger">-->
<!--            <ul>-->
<!--                <li th:each="err : ${#fields.globalErrors()}" th:text="${err}"></li>-->
<!--            </ul>-->
<!--        </div>-->

        <!-- 表单开始 - 确保有th:object属性 -->
        <form th:action="@{/register}" th:object="${registrationForm}" method="post">
            <!-- 家族名称 -->
            <div class="mb-3">
                <label for="familyName" class="form-label">家族名称</label>
                <input type="text" class="form-control" id="familyName"
                       th:field="*{familyName}" required>
                <small class="text-danger" th:if="${#fields.hasErrors('familyName')}"
                       th:errors="*{familyName}"></small>
            </div>

            <!-- 用户名 -->
            <div class="mb-3">
                <label for="username" class="form-label">管理员账号</label>
                <input type="text" class="form-control" id="username"
                       th:field="*{username}" required>
                <small class="text-danger" th:if="${#fields.hasErrors('username')}"
                       th:errors="*{username}"></small>
            </div>

            <!-- 密码 -->
            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input type="password" class="form-control" id="password"
                       th:field="*{password}" required>
                <small class="text-danger" th:if="${#fields.hasErrors('password')}"
                       th:errors="*{password}"></small>
            </div>

            <!-- 确认密码 -->
            <div class="mb-3">
                <label for="confirmPassword" class="form-label">确认密码</label>
                <input type="password" class="form-control" id="confirmPassword"
                       th:field="*{confirmPassword}" required>
                <small class="text-danger" th:if="${#fields.hasErrors('confirmPassword')}"
                       th:errors="*{confirmPassword}"></small>
            </div>

            <!-- 家族简介 -->
            <div class="mb-3">
                <label for="familyDescription" class="form-label">家族简介</label>
                <textarea class="form-control" id="familyDescription"
                          th:field="*{familyDescription}" rows="3"></textarea>
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary">注册</button>
                <a th:href="@{/login}" class="btn btn-outline-secondary">返回登录</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>